<template>
  <a-modal
    :visible="visible"
    title="提示"
    @cancel="handleCancel"
    :destroyOnClose="true"
  >
    <span>
      当前待退款账单可原路退回￥{{amount}}元，是否原路退回？
    </span>
    <template #footer>
      <a-button key="back" @click="handleCancel">取消</a-button>
      <a-button type="primary" :loading="refundLoading" @click="handleRefund()">原路退回</a-button>
      <a-button type="primary" @click="handleAction('next')">
        <template #icon v-if="actionType == 'createStream'">
          <PlusOutlined />
        </template>
        {{actionType == 'createStream' ? '收支流水' : '匹配'}}
      </a-button>
    </template>
  </a-modal>
</template>

<script>
import {defineComponent, reactive, toRefs, watch, createVNode,} from "vue";
import { message, Modal } from "ant-design-vue";
import request from "@/common/utils/request";
import _ from "lodash";
import {PlusOutlined, ExclamationCircleOutlined} from "@ant-design/icons-vue";
export default defineComponent({
  name: "RefundBillBackModal",
  components: {PlusOutlined},
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    actionType: {
      type: String,
      default: '',
    },
    amount: {
      type: [Number, String],
      default: 0,
    },
    billId: {
      type: [Number, String],
      default: 0,
    }
  },
  setup(props, { emit }) {
    const state = reactive({
      refundLoading: false,
      isRefund: false,
    });

    const handleCancel = () => {
      emit('handleCancel', state.isRefund)
    };

    const handleRefund = (type) => {
      state.refundLoading = true;
      request
        .post( "/org", '/billTransfer/addBillRefund', {bill_id: props.billId})
        .then((res) => {
          state.refundLoading = false;
          state.isRefund = true;
          Modal.confirm({
            title: '提示',
            icon: createVNode(ExclamationCircleOutlined),
            content: '原路退回成功',
            okText: '下一步',
            onOk() {
              handleAction();
            },
            onCancel() {
              handleCancel();
            },
          });
        }).catch((err) => {
        state.refundLoading = false;
      });
    };

    const handleAction = () => {
      let type = props.actionType;
      emit('handleAction', type, state.isRefund)
    };

    watch(
      () => props.visible,
      (val) => {
        if (!val) {
          state.loading = false;
        }
      }
    );

    return {
      ...toRefs(state),
      handleCancel,
      handleRefund,
      handleAction,
    };
  },
});
</script>

<style lang="less" scoped></style>
